<template>
	<view class="stu-details">
		<view class="stu-bg">
			<image :src="`/static/role${studentInfo.sex==1?1:''}.png`" mode="widthFix"></image>
		</view>
		<view class="st-content">
			<view class="info">
				
				<view class="name-head">
					<view style="display: flex;align-items: center;">
						<view class="avatar-head">
							<image class="head" :src="utils.headImage(studentInfo)" mode="aspectFill"></image>
						</view>
						<view class="name">{{studentInfo.name}}
							<image class="sex" :src="`/static/sex${studentInfo.sex}.png`" mode=""></image>
						</view>
					</view>
					<image v-if="userInfo.accountId!=studentInfo.accountId" class="xiaoxi" @click="chatPage(studentInfo)" src="/static/stu/ssjl.png" mode="aspectFill"></image>
				</view>
				<view v-if="userType==1">
					<view class="cla-grade">
						<text>班   级：{{orgGraders[studentInfo.clasId]}}</text>
					</view>
					<view class="number">
						<text><text class="num">{{studentInfo.zScore}}</text>积分</text>
						<text><text class="num">{{detailsInfo.rewardCount}}</text>获奖</text>
						<text><text class="num">{{detailsInfo.recommendCount}}</text>推荐</text>
						<text><text class="num">{{detailsInfo.starCount}}</text>月度之星</text>
					</view>
				</view>
			</view>
			<view class="tabs" v-if="userType==1">
				<!-- <text @click="activeIndex=1" :class="{active: activeIndex==1}">推荐内容</text> -->
				<text @click="activeIndex=2" :class="{active: activeIndex==2}">重要他人</text>
			</view>
			<view class="no-content" v-if="userType==2">
				暂无内容
			</view>
			<view class="example" v-show="activeIndex==2&&userType==1">
				<view class="example-details" v-if="exampleInfo.id || exampleTask&&exampleTask.length>0">
					<view class="ce-box" v-if="exampleInfo.id">
						<view class="ex-name ce-item">
							<text class="name">名 字</text>
							<text class="value">{{exampleInfo.name}}</text>
						</view>
						<view class="ce-item" v-if="exampleInfo.characterType>0">
							<text class="name">属 性</text>
							<text class="value">{{exampleInfo.characterType==1?'现实人物':'虚拟人物'}}</text>
						</view>
						<view class="ex-image ce-item">
							<text class="name">图 片</text>
							<view class="imgs">
								<image :src="exampleInfo.pictureUrl" mode="aspectFill" @click="previewImage([exampleInfo.pictureUrl])"></image>
							</view>
						</view>
						<view class="reason-item" v-if="exampleInfo.reason&&JSON.parse(exampleInfo.reason).length>0">
							<text class="name">选择理由</text>
							<view class="list">
								<view class="ri-item" v-for="(item, i) in JSON.parse(exampleInfo.reason)" :key="i">
									<text class="tag">{{i+1}}</text>
									{{item}}
								</view>
								
							</view>
						</view>
						<view class="ex-desc">
							<text class="name">基本特征</text>
							<view class="brief-box">
								{{exampleInfo.brief}}
							</view>
						</view>
						
					</view>
					<view class="ce-box ex-task ce-item" v-if="exampleTask.length>0">
						<text class="name">任务</text>
						<view class="list">
							<view class="select-picker">
								<view class="csu-item">
									<text>{{startDate}}</text>
									<image src="/static/rili.png" mode="aspectFill"></image>
								</view>
								<view class="" style="margin: 0 20px; color: #D7D7D7">——</view>
								<view class="csu-item">
									<text>{{range}}</text>
									<image src="/static/rili.png" mode="aspectFill"></image>
								</view>
							</view>
							<view class="item" v-for="(task, index) in exampleTask" :key="index">
								<text>{{task.content}}</text>
								<text class="state" v-if="task.state==1">审核中</text>
							</view>
						</view>
					</view>
				</view>
				<view class="example-details" v-else>该同学暂未绑定重要他人</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		data(){
			return {
				userInfo: {},
				activeIndex: 2,
				orgGraders: {},
				details: {},
				studentInfo: {},
				teacher_info: {},
				exampleInfo: {},
				exampleTask: [],
				startDate: '',
				range: '',
				detailsInfo: {},
				stuId: '',
				userType: ''
			}
		},
		onLoad(options) {
			this.stuId = options.id;
			this.getDetails()
		},
		methods: {
			getDetails(){
				this.api.get('user/findUserDetails', {
					accountId: this.stuId
				}).then(res=>{
					if(res.data.state != 'ok') return;
					this.userInfo = getApp().globalData.userInfo;
					let newOrgGraders = getApp().globalData.baseInfo.newOrgGraders;
					for(let i=0; i<newOrgGraders.length; i++){
						Object.assign(this.orgGraders, newOrgGraders[i])
					}
					let data = res.data;
					this.studentInfo = data.student||data.admin;
					this.userType = this.studentInfo.userType
					console.log(this.studentInfo )
					this.detailsInfo = data;

					this.exampleInfo = data.ex || {};
					this.exampleInfo.pictureUrl = this.api.xiaodeObsUrl + this.exampleInfo.pictureUrl;
					if(data.userType==1) return;
					this.exampleTask = data.sext || []
					if(this.exampleTask.length>0){
						let item = this.exampleTask[0],
						end_time = item.deadline || '',
						start_time = item.updateTime || item.addTime;
						this.range = end_time.split(' ')[0];
						this.range = this.utils.dateFormat(this.range)
						this.range = this.range.split('月')[0]+'月'

						this.startDate = start_time.split(' ')[0]
						this.startDate = this.utils.dateFormat(this.startDate)
						this.startDate = this.startDate.split('月')[0]+'月'
					}
					
				})


				// this.bindTeacher()
				// this.getExample()
			},
			bindTeacher(){
				
			},
			getExample(){
				
			},
			previewImage(list){
				uni.previewImage({
					urls: list,
					longPressActions: {
						itemList: [],
						success: function(data) {
							
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			chatPage(item){
				let url = item.avatarUrl||'';
				uni.navigateTo({
					url: `/pages/student/chat-page?toUserType=${item.userType}&id=${item.id}&accountId=${item.accountId}&name=${item.name}&avatarUrl=${url}`
				})
			},
		}
	}
</script>
<style lang="less">
	.stu-details{
		.stu-bg{
			background-color: #9ad1f8;
			text-align: right;
			padding: 32rpx 60rpx 0;
			// #ifdef H5
			margin-top: -44px;
			padding-top: 44px;
			// #endif
			
			image{
				width: 190rpx;
			}
		}
		.st-content{
			position: relative;
			margin-top: -380rpx;
			
			background-color: #fff;
			border-radius: 10rpx 10rpx 0 0;
			min-height: 500rpx;
		}
		.info{
			
			
			border-radius: 10rpx 10rpx 0 0;
			padding: 10rpx 0 50rpx 64rpx;
			border-bottom: 20rpx solid #f2f2f2;
			.avatar-head{
				padding: 15rpx;
				background-color: #fff;
				margin-right: 24rpx;
				border-radius: 80rpx;
				font-size: 0;
			}
			.name-head{
				margin-right: 56rpx;
				margin-top: -56rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.head{
				width: 130rpx;
				height: 130rpx;
				border-radius: 65rpx;
			}
			.xiaoxi{
				width: 50rpx;
				height: 50rpx;
			}
			.name{
				color: #000;
				font-size: 36rpx;
				.sex{
					margin-left: 8rpx;
					vertical-align: 8rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
			.cla-grade{
				white-space: pre-wrap;
				margin-top: 16rpx;
				color: #7f7f7f;
				line-height: 38rpx;
				font-size: 24rpx;
			}
			.number{
				margin: 50rpx 64rpx 0 0;
				display: flex;
				justify-content: space-between;
				color: #7f7f7f;
				.num{
					color: #000;
					margin-right: 8rpx;
				}
			}
		}
		.tabs{
			padding: 24rpx 64rpx;
			text{
				font-size: 28rpx;
				color: #7f7f7f;
				margin-right: 32rpx;
				padding: 8rpx 12rpx;
			}
			.active{
				color: #000;
				border-bottom: 2rpx solid #55acee;
			}
		}
		.no-content{
			text-align: center;
			line-height: 200rpx;
		}
		.example{
			image{
				width: 708rpx;
				height: 744rpx;
			}
		}
		.example-details{
			padding: 32rpx 45rpx;
			.state-tips{
				display: block;
				text-align: center;
				margin-bottom: 24rpx;
				font-size: 32rpx;
			}
			
			.ce-box{
				padding: 24rpx 0;
				margin-bottom: 32rpx;
			}
			.name{
				width: 156rpx;
				white-space: nowrap;
				color: #000;
				font-size: 28rpx;
			}
			.ce-item{
				display: flex;
				align-items: stretch;
				margin-bottom: 24rpx;
				border-bottom: 2rpx solid #f2f2f2;
				padding-bottom: 12rpx;
				.name{
					letter-spacing: .8em;
					padding-bottom: 12rpx;
				}
				.value, .imgs{
					width: calc(100% - 156rpx);
				}
				.imgs{
					font-size: 0;
					
					image{
						width: 90rpx;
						height: 90rpx;
						background-color: #FFFFFF;
						border-radius: 10rpx;
						margin-top: 24rpx;
					}
				}
				&.ex-image{
					padding-bottom: 24rpx;
					image{
						margin: 0;
					}
				}
			}
			
			.ex-name{
				align-items: center;
			}
			.reason-item{
				padding-bottom: 12rpx;
				border-bottom: 2rpx solid #f2f2f2;
				.list{
					margin-top: 32rpx;
				}
				.ri-item{
					// display: inline-block;
					margin-right: 32rpx;
					margin-bottom: 12rpx;
				}
				.tag{
					display: inline-block;
					width: 46rpx;
					height: 38rpx;
					text-align: center;
					line-height: 38rpx;
					background: #55acee;
					border-radius: 10rpx;
					font-size: 24rpx;
					color: #fff;
					margin-right: 24rpx;
					vertical-align: text-top;
				}
			}
			.ex-desc{
				margin-top: 32rpx;
				.brief-box{
					margin-top: 16rpx;
				}
			}
			.ex-task{
				&.ce-item{
					border: none;
				}
				.name{
					letter-spacing: 0em;
					line-height: 80rpx;
					width: 100rpx;
				}
				.select-picker{
					// border-bottom: 1px solid #dcdfe6;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.csu-item{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 40px;
						border-bottom: 1px solid #f2f2f2;
						font-size: 14px;
						image{
							width: 44rpx;
							height: 44rpx;
						}
					}
					.date-x-icon{
						min-width: 25px;
						width: 25px;
						height: 25px;
					}
					.uni-date__x-input{
						padding: 0;
					}
				}
				.list{
					width: 100%;
				}
				.item{
					border-bottom: 2rpx solid #f2f2f2;
					// height: 70rpx;
					padding: 14rpx 0;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					input{
						min-width: 66%;
						&.input-placeholder{
							color: #999;
						}
					}
					.state{
						margin-left: 24rpx;
						white-space: nowrap;
						color: #55acee;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>